<template>
	<view class="content home" @click="hiddenBar">
		<!-- 导航栏右上角 -->
		<view class="barNavigation" v-if="showBar">
			<view class="d4"></view>
			<view>
				<uni-list>
				    <uni-list-item title="扫一扫" :show-extra-icon="true" :extra-icon="scanIcon" :showArrow="false" @click="scan"></uni-list-item>
				    <uni-list-item title="快速测量" :show-extra-icon="true" :extra-icon="measureIcon" :showArrow="false"></uni-list-item>
				</uni-list>
			</view>
		</view>
		
		<!-- 头部轮播 -->
		<view>
            <swiper autoplay="true" circular="true" style="height: 300upx;">
                <swiper-item v-for="(img,key) in imgUrls" :key="key">
                    <image :src="img" style="width: 750upx;height: 300upx;" />
                </swiper-item>
            </swiper>
        </view>

		<!-- 通知公告 -->
		<view class="home-notice">
			<uni-notice-bar 
				showIcon="true" 
				scrollable="true" 
				single="true"  
				moreText="更多"
				:showGetMore="true" 
				:text="noticeTitle" 
				@click="getNoticeDetail" 
				@getmore="getNoticeMore" >
			</uni-notice-bar>
		</view>

		<!-- 工作统计 -->
		<view class="home-apply">
		     <div class="title">
		         工作统计
			 </div>
			<view class="flexRow">
				<main-entry 
					v-for="(item, index) in workList" 
					:img="item.img" 
					:bg="item.bg" 
					:title="item.title" 
					:url="item.url" 
					:key="index"> 
				</main-entry>
			</view>
		</view>

		<!-- 常用应用 -->
		<view class="home-apply" style="margin-top: 20rpx;">
             <div class="title">
                 常用应用
			 </div>
			<view class="flexRow">
				<main-entry 
					v-for="(item, index) in entryList" 
					:img="item.img" 
					:bg="item.bg" 
					:title="item.title" 
					:url="item.url" 
					:key="index">
				</main-entry>
			</view>
		</view>
	</view>
</template>

<script>
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
	import mainEntry from '@/components/menu-entry/main-entry.vue'
	import { getNews } from '@/api/common.js'
	import { business } from '@/utils/common.js'
	
	export default {
		components: {
			uniNoticeBar,
			mainEntry
		},
		data() {
			return {
				showBar: false,
				scanIcon: {
					color: '#fff',
					size: '20',
					type: 'scan'
				},
				measureIcon: {
					color: '#fff',
					size: '20',
					type: 'map-pin-ellipse'
				},
				imgUrls:[
					'../../static/banner1.jpg',
					'../../static/banner2.jpg',
					'../../static/banner3.jpg'
				],
				noticeId: '',
				noticeTitle: '',
				workList:[
					{
						img: '../../static/menu/09.png',
						title: '待审批',
						url: '/pages/flow/index'
					},
					{
						img: '../../static/menu/10.png',
						title: '设备监测',
						url: '/pages/entry/beforework/index'
					},
					{
						img: '../../static/menu/11.png',
						title: '报表查询',
						url: '/pages/entry/bzjs/index'
					}
				],
				entryList:[
					{
						img: '../../static/menu/09.png',
						title: '工单处理',
						url: '/pages/entry/kqgl/index'
					},
					{
						img: '../../static/menu/10.png',
						title: '工作票',
						url: '/pages/entry/beforework/index'
					},
					{
						img: '../../static/menu/11.png',
						title: '操作票',
						url: '/pages/entry/bzjs/index'
					},
					{
						img: '../../static/menu/12.png',
						title: '缺陷管理',
						url: '/pages/entry/taskmanage/index'
					},
					{
						img: '../../static/menu/13.png',
						title: '巡检',
						url: '/pages/entry/afterwork/index'
					}
				]
			}
		},
		onLoad() {
			this.init()
		},
		onShow() {
			business.refreshMsgCount()
		},
		methods: {
			init() {
				//获取公告
				getNews().then(res => {
					this.noticeId = res.data[0].id
					this.noticeTitle = res.data[0].title
				})
			},
			getNoticeDetail(){
				uni.navigateTo({
					url: '/pages/notice/detail?noticeId='+this.noticeId
				})
			},
			getNoticeMore(){
				uni.navigateTo({
					url: '/pages/notice/index'
				})
			},
			scan() {
				uni.scanCode({
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
				    }
				});
			},
			hiddenBar() {
				this.showBar = false
			}
		},
		onNavigationBarButtonTap(e) {
			this.showBar = !this.showBar
		},
	}
</script>

<style lang="scss">
	page {
		background: #f1f2f4;
	}
	
	.home{
		image {
			width: 100%;
			height: 100%;
		}

		.home-notice {
			width: 100%;
			//padding: 10px 0;
			background: #fff;
			float: left;
			//line-height: 30px;
	
			&--ico {
				display: block;
				float: left;
				width: 60px;
				height: 30px;
				background: url(@/static/notice.png) center no-repeat;
				background-size: 40px 20px;
			}
	
			&--title {
				width: calc(100% - 100px);
				float: left;
				margin: 0;
				font-size: 15px;
				display: block;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
	
			&--more {
				font-size: 14px;
				color: #9c9c9c;
				border-left: 1px solid #9c9c9c;
			}
			
			&--more text{
				margin: 0 5px;
			}
		}

		.home-apply{
			margin-top: 120rpx;
			background: #fff;
			>.title{
                text-align: center;
				color: #2e6d5d;
				padding: $uni-spacing-col-base 0;
				font-size: $uni-font-size-lg;
				border-bottom: 2rpx solid #dbe2ef;
				&:before{
					content: '-';
					color: #ddd;
					margin-right: 20rpx;
					transform: scaleX(2);
					display: inline-block;
				}
				&:after{
					content: '-';
					color: #ddd;
					margin-left: 20rpx;
					transform: scaleX(2);
					display: inline-block;
				}
			}
		}
	}
	
	.flexRow {
	  display: flex;
	  flex-direction: row;
	  flex-wrap: wrap;
	  justify-content: flex-start;
	  align-items: center;
	}

	.barNavigation {
		width: 250rpx;
		position: absolute;
		right: 10rpx;
		z-index: 99;
		
		.uni-list {
			background-color: #202020;
			border-radius: 10rpx;
			
			/deep/ .uni-list-item__content-title {
				color: #fff;
				font-size: 32rpx;
			}
			
			.uni-list-item--hover {
				background-color: #2e6d5d;
			}
		}
		
		.d4 {
			width: 0; 
			height: 0;
			margin-left: 180rpx;
			margin-top: -20rpx;
			border-width:20rpx;
			border-style: solid;
			border-color: transparent #202020 transparent transparent;
			transform: rotate(90deg); /*顺时针旋转90°*/
		}
	}
</style>
